<template>
  <div style="width: 100%; height: 100%">
    <div id="china-map" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import cityData from '../json/city.json'
import * as echarts from "echarts";
import JSON from "../../mapJson/zhejiang.json";
export default {
  data() {
    return {
      mapOption: {},
    };
  },
  mounted() {
    this.initMap();
    this.drawMap();
  },
  methods: {
    drawMap() {
      echarts.registerMap("zhejiang", JSON, {});
      const myChart = echarts.init(document.getElementById("china-map"));
      myChart.setOption(this.mapOption);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initMap() {
      this.mapOption = {
        color: ["#5470c6"],
        tooltip: {
          trigger: "item",
          renderMode: "html",
          triggerOn: "click",
          enterable: true,
          backgroundColor: "#fff",
          padding: 0,
          textStyle: {
            color: "#000",
            fontSize: "12",
          },
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "90%",
        legend: {},
        series: [
          {
            name: "",
            type: "effectScatter",
            coordinateSystem: "geo",
            color: ["#00DEFF"],
            rippleEffect: {
              color: "#0D8ABC",
            },
            tooltip: {
              position: "right",
              formatter(d) {
                console.log(d);
                // return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
              },
            },
            data: cityData,
          },
        ],
        geo: {
          map: "zhejiang",
          roam: false,
          label: {
            normal: {
              show: true,
              color: "#BCF5F6",
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#172D5F",
              borderColor: "#d3ffff",
              shadowColor: "#397e82",
              borderWidth: 1,
              shadowOffsetX: 6,
              shadowOffsetY: 8,
              opacity: 0.5,
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: "#fff",
              areaColor: "#397e82",
            },
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
      };
    },
  },
};
</script>

<style>
</style>
